<template>
    <div class="emotion">
        <div class="emotion-box">
            <div class="emotion_header">
                <el-tooltip class="item" effect="dark" :content="district" placement="top-start">
                    <span class="title_district">{{ district }}</span>
                </el-tooltip>

                <span>选择图标</span>
                <svg class="icon iclose" aria-hidden="true" style="cursor: pointer" @click="closePop">
                    <use xlink:href="#icon-guanbi"></use>
                </svg>
            </div>
            <div class="emotion_cat">
                <Tabs v-model="tabsVal" @on-click="switchTabsIcon">
                    <TabPane v-for="(a, s) in tabslist" :key="s + '1'" :label="a.label" :name="a.name"
                        style="height: calc(100% - 36px)">
                        <div class="emotion_pub" v-if="tabsVal !== '3'">
                            <div v-for="(item, i) in faceList" :key="i" @click="selectBoom(item.roudicon)">
                                <el-badge value="now" class="item"
                                    :hidden="item.roudicon == currentIcon ? false : true">
                                    <svg class="icon" aria-hidden="true"
                                        style="cursor: pointer; width: 100%; height: 100%">
                                        <use :xlink:href="'#' + item.roudicon"></use>
                                    </svg>
                                </el-badge>
                            </div>
                        </div>
                        <div v-else v-for="(item, i) in faceList" :key="i + '1'">
                            <svg class="icon" aria-hidden="true" style="cursor: pointer; width: 100%; height: 100%">
                                <use :xlink:href="'#' + item.roudicon"></use>
                            </svg>
                        </div>
                    </TabPane>
                </Tabs>
            </div>
            <div class="emotion_btn">
                <el-button type="warning" size="mini" @click="resetting" :disabled="currentIcon==''?true:false">重置
                </el-button>
                <el-button type="primary" size="mini" @click="queryBtn" :disabled="currentIcon==''?true:false">确定
                </el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import $ from "jquery";
    export default {
        data() {
            return {
                faceList: [],
                textarea: "",
                district: "",
                pagerInfo: {},
                tabsVal: "",
                tabslist: [],
                defaultIcon: {},
                fixedIconArr: [], //图标固定存储
                currentIcon: "", //当前选择 的图标
            };
        },
        props: {
            IconseTting: {
                type: Object,
                default: [],
            },
        },
        watch: {
            IconseTting(newV, oldV) {
                console.log(newV, oldV);
                //如果切换地区则初始化
                if (newV.name !== oldV.name) {
                    this.currentIcon = "";
                }
                this.pagerInfo = newV;
                this.faceList = []; //初始化
                this.district = newV.name;
                this.tabsVal = "3";
                if (JSON.stringify(this.defaultIcon) == '{}') {
                    console.log('1234455')
                    this.defaultIcon.name = newV.name;
                    this.defaultIcon.id = "001";
                    this.defaultIcon.iconName = newV.iconName;
                    this.defaultIcon.roudicon = newV.roudicon;
                    this.defaultIcon.defaultRoudicon = newV.roudicon;
                } else {
                     console.log('9000000')
                     this.currentIcon=newV.iconName;
                    this.defaultIcon.iconName = newV.iconName;
                    this.defaultIcon.roudicon = newV.roudicon;
                }
                console.log(this.defaultIcon);
                this.fixedIconArr[2].children[0] = this.defaultIcon;
                this.faceList.push(this.defaultIcon);
            },
            "IconseTting.roudicon": {
                //深度监听，可监听到对象、数组的变化
                handler(val, oldVal) {
                    console.log(val, oldVal); //但是这两个值打印出来却都是一样的
                    //如果是初始打开则不用
                    if (!oldVal) {
                        return;
                    }
                    console.log(this.defaultIcon);
                    this.defaultIcon.roudicon = val;
                    this.fixedIconArr[2].children[0] = this.defaultIcon;
                    //如果是当前则立即替换
                    if (this.tabsVal == '3') {
                        this.faceList = [];
                        this.faceList = this.fixedIconArr[2].children
                    }

                },
                deep: true,
            },
        },
        mounted() {
            // $.get("/public/iconCountry.json").then((res) => {
            //   // console.log(res);
            //   for (let i in res.list) {
            //     this.faceList.push(res.list[i]);
            //   }
            // });
            this.getIconSetting()
        },
        methods: {
            //获取图标配置
            getIconSetting() {
                $.getJSON("../../../public/iconPopInfo/list.json").then((res) => {
                    // console.log(res);
                    let obj = res.list
                    // let obj = JSON.parse(res).list
                    localStorage.setItem('fixedIconArr', obj);
                    this.fixedIconArr = JSON.parse(localStorage.getItem('fixedIconArr'));
                    for (let t of res.list) {
                        let obj = {};
                        obj.name = t.id;
                        obj.label = t.type;
                        this.tabslist.push(obj);
                    }
                });
            },
            /* 按钮事件 start */
            closePop() {
                this.$emit("closePopup", 'icon');
            },
            selectBoom(iName) {
                this.currentIcon = iName;
            },
            //确定替换
            queryBtn() {
                this.$emit("replaceIcon", this.currentIcon, this.IconseTting);
                //每次替换成功都需要存储到本地缓存
                let locaInfo = {};
                locaInfo['District'] = this.district; //代表国家
                locaInfo['iconName'] = this.currentIcon; //当前使用的icon
                this.fixedIconArr[2].isChange = true; //已经修改图标则修改状态 而在重置需要更改回来
                //存储到指定下标
                let index = Number(this.pagerInfo.id.substr(1, this.pagerInfo.id.length));
                let arr = JSON.parse(localStorage.getItem('IconList'));
                arr[index - 1] = locaInfo;
                localStorage.setItem('IconList', JSON.stringify(arr));
            },
            //重置默认
            resetting() {
                this.defaultIcon.roudicon = this.defaultIcon.defaultRoudicon;
                this.fixedIconArr[2].children[0] = this.defaultIcon;
                console.log(this.tabsVal);
                this.fixedIconArr[2].isChange = false;
                //如果当前 则立即替换
                if (this.tabsVal == "3") {
                    this.faceList = [];
                    this.faceList = this.fixedIconArr[2].children;
                }
                this.currentIcon = "";
                this.$emit("replaceIcon", this.defaultIcon.roudicon, this.IconseTting);
            },
            /* 按钮事件 end */
            /* 数据事件 start */
            //切换tabs 判断
            switchTabsIcon(id) {
                console.log(id);
                console.log(this.fixedIconArr);
                console.log(Number(id - 1));
                console.log(this.fixedIconArr[Number(id - 1)].children);
                this.faceList = this.fixedIconArr[Number(id - 1)].children;
            },
            //获取图标数据
            getChangeStatics() {},
            /* 数据事件 end */
        },
    };
</script>

<style lang="less" scoped>
    .emotion {
        // position: absolute;
        // right: 50%;
        // top: 50%;
        // z-index: 999;
    }

    .emotion-box {
        margin: 0 auto;
        width: 400px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        height: 360px;
        border-radius: 5px;
        background-color: #fff;
        padding: 0;
        box-shadow: 0px 3px 8px rgb(59, 85, 85);

        .emotion_header {
            width: 100%;
            height: 38px;
            text-align: center;
            position: relative;
            background: #6495ed;
            color: #fff;
            font-size: 1.2rem;
            font-family: Arial, Helvetica, sans-serif;
            padding: 5px 0;
            line-height: 35px;

            .iclose {
                position: absolute;
                right: -10px;
                top: -5px;
            }

            span {
                line-height: 35px;
            }

            .title_district {
                width: 100px;
                position: absolute;
                left: 10px;
                color: #fff;
                font-weight: bold;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .emotion_cat {
            width: 100%;
            height: calc(100% - 80px);
        }

        .emotion_pub {
            width: 100%;
            height: 100%;
            display: flex;
            flex-flow: row wrap;
            justify-content: flex-start;
            align-content: space-around;

            div {
                width: 25%;
                height: 50px;
                text-align: center;
                padding: 5px 0;
            }
        }

        .emotion_btn {
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 0 10px;
        }
    }

    .ivu-tabs {
        height: 100%;
    }
</style>